<template>
	<view class="ccontainer">
		<view class="aside cflex cflex_row cflex_between cflex_items">
			<block v-for="(item,index) in asideList" :key="index">
				<view class="aside-item" :class="{active:index==asideIndex}" @click="asideClick" :data-index="index">{{item}}</view>
			</block>
		</view>

		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="banner" indicator-color="#fff"
		 indicator-active-color="#FF7427">
			<block v-for="(item,index) in goods.images" :key="index">
				<swiper-item class="banner">
					<image class="banner" :src="item" mode=""></image>
				</swiper-item>
			</block>
		</swiper>

		<view class="titleBlock white cflex cflex_col">
			<view class="money cflex cflex_row cflex_between">
				<view class="money1">￥{{detail.factory_price}}</view>
				<view class="money2">{{goods.sale}}件已售</view>
			</view>
			<view class="nameBlock cflex cflex_row cflex_between cflex_items">
				<view class="name cflex cflex_1">{{goods.name}}</view>
				<image class="shoucang" v-if="detail.collcet==1" src="/static/clq-image/shoucang_1.png" mode="scaleToFill"></image>
				<image class="shoucang" v-else src="/static/clq-image/shoucang_2.png" mode=""></image>
			</view>
			<view class="type_name cflex cflex_row">{{goods.type_name}}</view>
		</view>
		
		<view class="fordetails white cflex cflex_col">
			<view class="fordetails-items cflex cflex_row cflex_between cflex_items">
				<view class="cflex cflex_row cflex_item cflex_1">
					<view class="fordetails-itemsText1">运费</view>
					<view class="fordetails-itemsText2">￥{{detail.shipping}}</view>
				</view>
				<view class="cflex cflex_row cflex_items cflex_1">
					<view class="fordetails-itemsText1">税金</view>
					<view class="fordetails-itemsText2">￥{{detail.taxes}}</view>
				</view>
			</view>
			<view class="fordetails-items cflex cflex_row cflex_between cflex_items">
				<view class="cflex cflex_row cflex_item cflex_1">
					<view class="fordetails-itemsText1">报价有效期</view>
					<view class="fordetails-itemsText2">{{detail.quoteddate}}</view>
				</view>
				<view class="cflex cflex_row cflex_items cflex_1">
					<view class="fordetails-itemsText1">起订量</view>
					<view class="fordetails-itemsText2">{{detail.num}}</view>
				</view>
			</view>
			<view class="fordetails-items cflex cflex_row cflex_between cflex_items">
				<view class="cflex cflex_row cflex_item cflex_1">
					<view class="fordetails-itemsText1">发货时间</view>
					<view class="fordetails-itemsText2">{{detail.delivery}}天</view>
				</view>
			</view>
		</view>
		
		<view class="fordetails white" @click="specStatusChange">
			<view class="fordetails-items cflex cflex_row cflex_between cflex_items">
					<view class="fordetails-itemsText1">参数规格</view>
					<view class="fordetails-itemsText2"><image src="/static/clq-image/detailPro-right.png"></image></view>
			</view>
		</view>
		
		<view v-if="classType == 3 || classType == 4" class="fordetails white cflex cflex_col">
			<view class="fordetails-items cflex cflex_row cflex_between cflex_items">
					<view style="font-size: 30rpx;" class="fordetails-itemsText1">报价记录</view>
					<view></view>
			</view>
			<view v-if="quoted.length==0" class="specItem cflex cflex_col cflex_items cflex_right">
				<view class="noQuoted">暂无报价记录</view>
			</view>
			<block v-else  v-for="(item,index) in quoted" :key="index">
				<view class="specItem cflex cflex_row cflex_between">
					<view class="cflex cflex_col">
						<view  class="cflex cflex_row">
							<view>{{item.name}}</view>
							<view style="font-size: 22rpx;color: #555;margin-left: 16rpx;">有效期：{{item.quoteddate}}</view>
						</view>
						<view style="margin-top: 10rpx;">{{item.mobile}}</view>
					</view>
					<view style="color: #d50000;">报价：{{item.factory_price}}元</view>
				</view>
			</block>
		</view>
		
		<view class="evaluateBlock white cflex cflex_col">
			<view class="evaluateTop cflex cflex_row cflex_between cflex_items">
				<view class="evaluateTitle">用户评价（{{evaluate.total}}）</view>
				<view class="evaluateMore cflex cflex_row cflex_items">
					<view>查看全部</view>
					<image src="/static/clq-image/evaluateMore.png" mode=""></image>
				</view>
			</view>
			<block v-for="(item,index) in evaluate.list" :key="index">
				<view class="evaluateItem cflex cflex_col">
					<view class="cflex cflex_row cflex_items">
						<image class="headAvartar" :src="item.head_image" mode=""></image>
						<view class="headName">{{item.name}}</view>
						<uniRate :value="item.star" :size="18" :readonly="true" color="#999" active-color="#FF7427"/>
					</view>
					<view class="evaluateItem-content">{{item.content}}</view>
				</view>
			</block>
		</view>
		
		<view class="ackBlock  white cflex cflex_col">
			<view class="evaluateTop cflex cflex_row cflex_between cflex_items">
				<view class="evaluateTitle">问大家（{{ask.total}}）</view>
				<view class="evaluateMore cflex cflex_row cflex_items">
					<view>查看全部</view>
					<image src="/static/clq-image/evaluateMore.png" mode=""></image>
				</view>
			</view>
			<block v-for="(item,index) in ask.list" :key="index">
				<view class="askItem cflex cflex_row cflex_between cflex_items">
					<image class="question-img" src="/static/clq-image/detailPro-ask.png" mode=""></image>
					<view class="question cflex cflex_1">{{item.content}}</view>
					<view class="answer">{{item.answer_total}}个回答</view>
				</view>
			</block>
		</view>
		<view class="proDetail cflex cflex_col cflex_items">
			<view class="proDetail-title cflex cflex_row cflex_items">
				<view class="hr"></view>
				<view style="margin: 0 15rpx;">商品详情</view>
				<view class="hr"></view>
			</view>
			<block v-for="(item,index) in goods.content_images" :key="index">
				<image class="detailPro-content" :src="item" mode=""></image>
			</block>
		</view>
		<view class="detailPro-bottom cflex cflex_row cflex_between cflex_items">
			<view class="indexBtn cflex cflex_col cflex_items">
				<image src="/static/clq-tabBar/purchasetabed1.png" mode=""></image>
				<view>首页</view>
			</view>
			<view class="cflex cflex_row cflex_items">
				<view class="detailPro-btn1 cflex cflex_row cflex_center cflex_items" @click="btnPage" data-type="1">加入报价表</view>
				<view class="detailPro-btn1 cflex cflex_row cflex_center cflex_items" @click="btnPage" data-type="2">添加报价</view>
				<view class="detailPro-btn1 detailPro-btn2 cflex cflex_row cflex_center cflex_items" @click="orderStatusChange">我要下单</view>
			</view>
		</view>
		
		<view v-if="specStatus" class="mask" @click="specStatusChange"></view>
		<view v-if="specStatus" class="specDialog cflex cflex-col">
			<view class="specDialog-item cflex cflex_row cflex_center cflex_items">
				<view>参数规格</view>
			</view>
			<block v-for="(item,index) in detail.setting" :key="index">
				<view class="specDialog-item cflex cflex_row cflex_between cflex_items">
					<view>{{item.setting_name}}</view>
					<view>{{item.setting_value}}</view>
				</view>
			</block>
		</view>
	
		<view v-if="orderStatus" class="mask" @click="orderStatusChange"></view>
		<view v-if="orderStatus" class="orderDialog cflex cflex_col cflex_between cflex_items">
			<view class="orderDialog-title cflex cflex_row cflex_center cflex_items">购买数量</view>
			<input type="number" v-model="proNum" @blur="inputText" placeholder="请输入购买数量"/>
			<view class="orderDialog-btn cflex cflex_row cflex_between">
				<view class="orderDialog-btn orderDialog-btn1 cflex cflex_col cflex_center cflex_items" @click="orderStatusChange">取消</view>
				<view class="orderDialog-btn orderDialog-btn2 cflex cflex_col cflex_center cflex_items"  @click="btnPage" data-type="3">确定</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		ajax
	} from '../../ajax.js';
	import uniRate from '../../components/uni-rate/uni-rate';
	export default {
		components:{
			uniRate
		},
		data() {
			return {
				classType:'',
				id: '',
				asideList: ['宝贝', '评价', '详情'],
				asideIndex: 0,
				detail: {},
				goods: {},
				quoted:[],//报价记录
				evaluate:[],//评价
				ask:[],//问大家
				specStatus:false,
				orderStatus:false,
				proNum:'1'
			}
		},
		onShow: function() {
			let that = this
			that.classType = uni.getStorageSync('class')
		},
		onLoad: function(opt) {
			let that = this
			// that.id = opt.id
			that.id = 33
			that.asideIndex = 0
			console.log('id', that.id)
			that.getDetail()
		},
		methods: {
			orderStatusChange(){
				this.orderStatus = !this.orderStatus
			},
			inputText(e){
				this.proNum=e.detail.value
			},
			specStatusChange(){
				this.specStatus = !this.specStatus
			},
			btnPage(e){
				let that = this
				
				let type = e.currentTarget.dataset.type
				console.log(type)
				
				if(that.proNum<=0||that.proNum==''){
					uni.showToast({
						title: '请输入下单数量',
						duration: 1500,
						icon: 'none'
					});
					return
				}
				if(type==1){
					
				}else if(type==2){
					uni.navigateTo({
						url:"/pages/release3/release3?type=4&id=" + that.detail.good_id
					})
				}else if(type==3){
					uni.navigateTo({
						url:"/pages/order/order?num="+that.proNum+"&id=" + that.detail.good_id
					})
				}
			},
			asideClick(e) {
				let that = this
				that.asideIndex = e.currentTarget.dataset.index
			},
			getDetail() {
				let that = this
				uni.showLoading({
					title: "加载中"
				})
				ajax({
					url: 'goods/getGood',
					data: {
						token: uni.getStorageSync('token'),
						id: that.id,
						from: 1
					},
					header: {
						'content-type': 'application/json' //自定义请求头信息
					},
					method: 'POST',
					success: function(res) {
						uni.hideLoading()
						let result = res.data.data
						if (res.data.code == 1) {
							that.detail = result
							that.goods = result.goods
							console.log('detail', that.detail);
							that.getGoodOther()
						} else if (res.data.code == 0) {
							uni.showToast({
								title: res.data.msg,
								duration: 1500,
								icon: 'none'
							});
						} else if (res.data.code == -1) {
							uni.reLaunch({
								url: '/pages/clq_login/clq_login'
							})
						} else if (res.data.code == -2) {
							uni.showToast({
								title: res.data.msg,
								duration: 1500,
								icon: 'none'
							});
						}
					},
					error: function() {
						uni.showToast({
							title: res.data.msg,
							duration: 1500,
							icon: 'none'
						});
					}
				});
			},
			getGoodOther(){
				let that = this
				uni.showLoading({
					title: "加载中"
				})
				ajax({
					url: 'goods/getGoodOther',
					data: {
						token: uni.getStorageSync('token'),
						good_id:that.detail.good_id,
						other:0
					},
					header: {
						'content-type': 'application/json' //自定义请求头信息
					},
					method: 'POST',
					success: function(res) {
						uni.hideLoading()
						let result = res.data.data
						if (res.data.code == 1) {
							that.quoted = result.quoted
							that.evaluate = result.evaluate
							that.ask = result.ask
							console.log('result',result)
						} else if (res.data.code == 0) {
							uni.showToast({
								title: res.data.msg,
								duration: 1500,
								icon: 'none'
							});
						} else if (res.data.code == -1) {
							uni.reLaunch({
								url: '/pages/clq_login/clq_login'
							})
						} else if (res.data.code == -2) {
							uni.showToast({
								title: res.data.msg,
								duration: 1500,
								icon: 'none'
							});
						}
					},
					error: function() {
						uni.showToast({
							title: res.data.msg,
							duration: 1500,
							icon: 'none'
						});
					}
				});
			}
		}
	}
</script>

<style>
	page {
		background-color: #f7f7f7;
	}

	.aside {
		width: 100%;
		box-sizing: border-box;
		padding: 35rpx 0 19rpx 0;
		background-color: #fff;
		font-size: 28rpx;
		font-weight: 500;
		color: #333333;
		padding: 35rpx 20rpx 20rpx 20rpx;
	}

	.aside-item {
		padding: 5rpx 1rpx;
	}

	.active {
		color: #ff7427;
		border-bottom: 1rpx solid #ff7427;
	}

	.banner {
		width: 100%;
		box-sizing: border-box;
		height: 750rpx;
	}

	.white {
		background-color: #fff;
	}

	.titleBlock {
		width: 100%;
		box-sizing: border-box;
		padding: 0 20rpx;
		margin-bottom: 22rpx;
	}

	.money {
		width: 100%;
		box-sizing: border-box;
		margin: 41rpx 0 29rpx 0;
	}

	.money1 {
		font-size: 28rpx;
		font-weight: 700;
		color: #cf0000;
	}

	.money2 {
		font-size: 24rpx;
		font-weight: 500;
		color: #555555;
	}
	
	.nameBlock{
		margin: 29rpx 0 30rpx 0;
	}

	.name {
		font-size: 30rpx;
		font-weight: 500;
		color: #333333;
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		word-break: break-all;
		white-space: normal !important;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.shoucang{
		width: 34rpx;
		height: 34rpx;
		margin-left: 90rpx;
	}
	.type_name{
		font-size: 24rpx;
		font-weight: 500;
		color: #555555;
		margin-bottom: 32rpx;
	}
	.fordetails{
		width: 100%;
		box-sizing: border-box;
		margin-bottom: 22rpx;
		padding: 0 20rpx;
	}
	.fordetails-items{
		width: 100%;
		box-sizing: border-box;
		height: 76rpx;
	}
	.fordetails-itemsText1{
		font-size: 28rpx;
		font-weight: 500;
		color: #333333;
		margin-right: 19rpx;
	}
	.fordetails-itemsText2{
		font-size: 24rpx;
		font-weight: 500;
		color: #555555;
	}
	.fordetails-itemsText2 image{
		width: 12rpx;
		height: 20rpx;
	}
	
	.specItem{
		width: 100%;
		box-sizing: border-box;
		min-height: 112rpx;
		border-top: 1rpx solid #f7f7f7;
		padding: 20rpx;
		color: #333;
		font-size: 28rpx;
		font-weight: 500;
	}
	
	
	.noQuoted{
		color: #333;
		font-size: 24rpx;
		margin-bottom: 30rpx;
	}
	.evaluateTop{
		width: 100%;
		box-sizing: border-box;
		padding: 30rpx 18rpx 29rpx 21rpx;
	}
	.evaluateTitle{
		font-size: 30rpx;
		font-weight: 500;
		color: #333333;
	}
	.evaluateMore{
		font-size: 24rpx;
		font-weight: 500;
		color: #ff7427;
	}
	.evaluateMore image{
		width: 12rpx;
		height: 20rpx;
		margin-left: 20rpx;
	}
	.evaluateItem{
		width: 100%;
		box-sizing: border-box;
		margin: 0 29rpx 0 19rpx;
		border-bottom:1rpx solid #f7f7f7;
	}
	.headAvartar{
		width: 44rpx;
		height: 44rpx;
	}
	.headName{
		font-size: 28rpx;
		font-weight: 500;
		margin: 0 7rpx 0 15rpx;
	}
	.evaluateItem-content{
		font-size: 28rpx;
		font-weight: 500;
		margin: 25rpx 0;
	}
	
	.askItem{
		padding: 0 45rpx 0 22rpx;
		margin-bottom: 22rpx;
	}
	.question-img{
		width: 36rpx;
		height: 36rpx;
		margin-right: 15rpx;
	}
	.question{
		font-size: 28rpx;
		font-weight: 500;
		color: #333333;
	}
	.answer{
		font-size: 24rpx;
		font-weight: 500;
		color: #555555;
	}
	
	.proDetail{
		padding-bottom: 100rpx;
	}
	.proDetail-title{
		font-size: 30rpx;
		font-weight: 500;
		color: #333333;
		padding: 32rpx 0 18rpx 0;
	}
	.hr{
		width: 123rpx;
		height: 1rpx;
		background: #333333;
	}
	.detailPro-content{
		width: 100%;
		box-sizing: border-box;
		height: 100%;
	}
	
	.detailPro-bottom{
		width: 100%;
		box-sizing: border-box;
		height: 98rpx;
		position: fixed;
		bottom: 0;
		background-color: #fff;
		color: #FF7427;
		font-size: 28rpx;
		padding: 0 0 0 33rpx;
	}
	.indexBtn{
		font-size: 26rpx;
	}
	.indexBtn image{
		width: 44rpx;
		height: 44rpx;
		margin-bottom: 6rpx;
	}
	.detailPro-btn1{
		width: 160rpx;
		height: 46rpx;
		border: 1rpx solid #ff7427;
		border-radius: 10rpx;
		margin-right:20rpx;
	}
	.detailPro-btn2{
		background: #ff7427;
		border:0;
		color: #fff;
	}
	
	
	.mask {
	  width: 100%;
	  height: 100%;
	  position: fixed;
	  top: 0;
	  left: 0;
	  background: #000;
	  opacity: 0.5;
	  overflow: hidden;
	  color: #000;
	  z-index:99;
	}
	.specDialog{
		width: 750rpx;
		height: 806rpx;
		background: #ffffff;
		border-radius: 20rpx 20rpx 0px 0px;
	    position: fixed;
	    left: 0;
	    bottom: 0;
	    z-index: 999;
	    background-color: #fff;
		padding-top: 30rpx;
		overflow-y: auto;
	}
	.specDialog-item{
		width: 100%;
		box-sizing: border-box;
		height: 79rpx;
		border-bottom: 1rpx solid #f7f7f7;
		padding: 0 20rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #333333;
	}
	
	.orderDialog{
		width: 100%;
		box-sizing: border-box;
		height: 423rpx;
		border-radius: 20rpx 20rpx 0px 0px;
		background-color: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 999;
	}
	.orderDialog-title{
		width: 100%;
		box-sizing: border-box;
		height: 88rpx;
		border-bottom: 1rpx solid #f7f7f7;
		font-size: 28rpx;
		font-weight: 500;
		color: #333333;
	}
	.orderDialog input{
		width: 660rpx;
		height: 66rpx;
		background: #e5e5e5;
		border-radius: 12rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #333;
		padding: 0 15rpx;
	}
	.orderDialog-btn{
		width: 100%;
		box-sizing: border-box;
		height: 100rpx;
		font-size: 28rpx;
		font-weight: 500;
	}
	.orderDialog-btn1{
		background: #f7f7f7;
		color: #333333;
	}
	.orderDialog-btn2{
		background: #FF7427;
		color: #fff;
	}
	
	
</style>
